<template>
    <div class="page">
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <div class="top">
            <div style="position: absolute;z-index: 10000;height: 44px;padding-left: 5px;">
                <img style="height: 15px;width: 15px;margin-top: 14px;" @click="back()" src="./photo/返回.png" alt="">
            </div>

            <van-tabs v-model:active="active">
                <van-tab title="图文">
                    <van-dropdown-menu>
                        <van-dropdown-item v-model="value1" :options="option1" />
                        <van-dropdown-item v-model="value2" :options="option2" />
                        <van-dropdown-item v-model="value3" :options="option3" />
                    </van-dropdown-menu>
                    <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                        <span class="item" v-for="item in list" @click="ship_detail(1)">
                            <div class="item_img"></div>
                            <div class="item_title">
                                <span>扭扭棒郁金香</span>
                            </div>
                            <div class="item_money">
                                <span class="money">by花花</span><br>
                                <span class="payed">55收藏</span>
                            </div>
                        </span>

                    </van-list>
                </van-tab>
                <van-tab title="视频">
                    <van-dropdown-menu>
                        <van-dropdown-item v-model="value4" :options="option4" />
                        <van-dropdown-item v-model="value5" :options="option5" />
                        <van-dropdown-item v-model="value6" :options="option6" />

                        <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                            <span class="shipin" v-for="item in list">
                                <div class="hang">
                                    <div class="video_tu">
                                        <div class="icon">
                                            <van-icon size="30" name="play-circle-o" />
                                        </div>
                                    </div>
                                    
                                <div class="video_zi">
                                    <span style="width: 100px;word-break: break-all;overflow: auto;white-space: normal;">
                                        扭扭棒郁金香</span>
                                </div>
                                </div>    
                            </span>
                        </van-list>
                    </van-dropdown-menu>
                </van-tab>
            </van-tabs>
        </div>
        </van-pull-refresh>

        


    </div>
</template>

<script setup lang='ts'>
import { Toast } from "vant";
import { useRouter, useRoute } from 'vue-router'
import { ref, reactive , } from 'vue'
const router = useRouter()
const route = useRoute()
const active = ref(0);

//图文教程布局 、视频
const list: any = ref([]);
const finished = ref(false);
const refreshing = ref(false);

const count = ref(0);
const loading = ref(false);

const onRefresh = () => {
      setTimeout(() => {
        Toast('刷新成功');
        loading.value = false;
        count.value++;
      }, 1000);
    };
//加载
const onLoad = () => {
    setTimeout(() => {
        if (refreshing.value) {
            list.value = [];
            refreshing.value = false;
        }
        for (let i = 0; i < 10; i++) {
            list.value.push(list.value.length + 1);
        }
        loading.value = false;
        Toast.clear()
        if (list.value.length >= 30) {
            finished.value = true;
            Toast({
                duration: 3000,
                message: '加载完毕',
            })
        }
    }, 1000);

};
//回退上一页面
function back() {
    router.push({
        name: 'find'
    })
}
//教程图文部分导航栏
const value1 = ref(0);
const value2 = ref('a');
const value3 = ref('a');
const option1 = [
    { text: '全部分类', value: 0 },
    { text: '布艺', value: 1 },
    { text: '皮艺', value: 2 },
    { text: '纸艺', value: 3 },
    { text: '木艺', value: 4 },
    { text: '编织', value: 5 },
    { text: '饰品', value: 6 },
    { text: '刺绣', value: 7 },
    { text: '模型', value: 8 },
    { text: '羊毛毡', value: 9 },
];
const option2 = [
    { text: '一周', value: 'a' },
    { text: '一月', value: 'b' },
    { text: '全部教程', value: 'c' },
];
const option3 = [
    { text: '最热教程', value: 'a' },
    { text: '最新更新', value: 'b' },
    { text: '评论最多', value: 'c' },
    { text: '收藏最多', value: 'd' },
    { text: '材料包有售', value: 'e' },
    { text: '成品有售', value: 'f' },
];
//教程视频部分导航栏
const value4 = ref(0);
const value5 = ref('a');
const value6 = ref('a');
const option4 = [
    { text: '全部分类', value: 0 },
    { text: '布艺', value: 1 },
    { text: '皮艺', value: 2 },
    { text: '纸艺', value: 3 },
    { text: '木艺', value: 4 },
    { text: '编织', value: 5 },
    { text: '饰品', value: 6 },
    { text: '刺绣', value: 7 },
    { text: '模型', value: 8 },
    { text: '羊毛毡', value: 9 },
];
const option5 = [
    { text: '全部视频', value: 'a' },
    { text: '免费', value: 'b' },
    { text: '会员专享', value: 'c' },
];
const option6 = [
    { text: '最新更新', value: 'a' },
    { text: '人气', value: 'b' },
    { text: '收藏最多', value: 'c' },
    { text: '材料包有售', value: 'd' },
];


function ship_detail(cc: any) {
    router.push({
        path: '/jc_tu',
        query: {
            id: cc
        }
    })
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.page {
    height: 100vh;
    width: 100vw;

}

.top {
    /* display: flex; */
    position: relative;
}

/* 
.top_zuo {}

.top_you {
    flex: 1;
} */

/* 图文教程样式 */
.item {
    box-sizing: border-box;
    display: inline-block;
    margin: 10px 10px 0px 10px;
    width: 44vw;
    height: 30vh;
    background-color: burlywood;
}

.item_img {
    width: 100%;
    height: 65%;
    background-image: url(@/components/cby/photo/2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 5px;
}

.item_title {
    /* height: 25%; */
    color: #fdfcf7;
    padding-left: 5px;
}

.item_title>span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 15px;
    /* font-weight: 500; */
}

.item_money {
    /* height: 10%; */
    padding-left: 5px;
}

.item_money>.money {
    font-size: 10px;
    /* font-weight: 300; */
    color: #a29997;
    padding-right: 10px;
}

.item_money>.payed {
    font-size: 10px;
    color: #a29997;
}

.hang{
    width: 92%;
    height: 65%;
    padding: 5px 15px 5px 15px;
    margin-bottom: 5px;
    background-color:#f7f7f7;
}
.video_tu{
    margin: 5px 0px 5px 0px;
    height: 35vh;
    width: 100%;
    background-image: url(@/components/cby/photo/4.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    position: relative;
}
.icon{
    width: 30px;
    height: 30px;
    z-index: 10000;
    position: absolute;
    bottom: 5vh;
    right: 5vw;
    background-size: cover;
}

.video_zi>span{
    font-size: 13px;
}
</style>